<template>
	<view>

		<!-- 选择栏 -->
		<view class="choose-tab flex relative" :style="[{top:0 + 'px'}]">
			<view :class="['tab-item flex-sub',checked == index ? 'active':'']" v-for="(item,index) in tabbar"
				:key="index" @click="chooseTab(index)">
				{{item.name}}
			</view>
		</view>

		<!-- 订单列表 -->
		<swiper class="grace-tab-swiper-full" :current="swiperCurrentIndex" @change="swiperChange"
			:style="{ height: tabHeight + 'px' }">
			<swiper-item v-for="(item, newsIndex) in tabbar.length" :key="newsIndex">
				<scroll-view :data-scindex="newsIndex" @scrolltolower="scrollBottom" scroll-y="true"
					:style="{ height: tabHeight + 'px' }">
					
					<view style="width:750rpx;height:116rpx;"></view>
					
					<view class="goods" v-for="(item,index) in 6" :key="index">
						
						<view class="g-item1 flex justify-start align-center relative">
							
							<image class="img" mode="aspectFill" src="/static/test/rb.jpeg"></image>
							<view class="item-text flex-sub">
								<view class="text1 over-text2">
									这个是标题模式，用来查看这个标题的素有文字超出文本第二行具体会怎么样
								</view>
								<view class="text2 flex justify-start align-center">
									<text class="item-text1 flex-sub">
										2人团
									</text>
									<text class="item-text2 flex-sub">
										￥880
									</text>
									<text class="item-text3">
										拼团中
									</text>
								</view>
							</view>
							
							<!-- 已经中奖 -->
							<view class="getdraw"> 
								已中奖
							</view>
							
						</view>
						<view class="g-item2 flex justify-end align-center">
							
							<view class="item1">
								查看订单详情
							</view>
							<view class="item2">
								查看图详情
							</view>
							
						</view>
						
					</view>



				</scroll-view>
			</swiper-item>
		</swiper>



	</view>

</template>

<script>
	export default {
		data() {
			return {
				TabCur: undefined,
				swiperCurrentIndex: undefined,
				tabHeight: 466,
				
				orderClassification:false,//订单分类按钮


				checked: 0, //选中下标
				tabbar: [{
						id: 1,
						name: '全部'
					},
					{
						id: 2,
						name: '进行中'
					},
					{
						id: 3,
						name: '待抽奖'
					},
					{
						id: 4,
						name: '已抽奖'
					},
					{
						id: 5,
						name: '失败团'
					}
				]


			}
		},
		computed: {
			style() {
				var StatusBar = this.StatusBar;
				var CustomBar = this.CustomBar;
				var style = `height:${CustomBar}px;padding-top:${StatusBar}px;`;
				return style
			}
		},
		onLoad() {

		},
		onReady() {
			var that = this;
			//获取屏幕高度及比例
			var winInfo = uni.getSystemInfo({
				success: function(res) {
					var windowHeight = res.windowHeight;
					console.log(windowHeight, '--手机高度')
					var dom = uni.createSelectorQuery().select('.choose-tab')
					dom.fields({
						size: true
					}, res => {
						if (!res) {
							return;
						}
						that.tabHeight = windowHeight;
					}).exec();
				}
			});
		},
		onShow() {



		},
		methods: {
			// 订单分类按钮
			checkClass(){
				console.log('订单分类点击')
				this.orderClassification = !this.orderClassification
			},
			// srcoll到底了
			scrollBottom() {
				console.log('已经到底了=====')
			},
			// 轮播图滑动
			swiperChange(e) {
				var index = e.detail.current;
				this.checked = index;
				this.swiperCurrentIndex = index;
			},
			chooseTab(index) {
				this.checked = index;
				this.swiperCurrentIndex = index;
				console.log(this.checked, '===checked')
			},
			jump() {
				this.$mRouter.push({
					route: this.$mRoutesConfig.test.orderDetail,
					query: {
						a: 0
					}
				})
			},
			// 返回上一页
			BackPage() {
				console.log('是否可以点击')
				uni.navigateBack({
					delta: 1
				});
			}


		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f8f8f8;
	}
	// 拼团商品
	.goods{
		box-shadow: 0rpx 4rpx 12rpx rgba(0, 0, 0, 0.1);
		margin-bottom: 16rpx;
		background-color: white;
		.g-item1{
			width:750rpx;
			height:220rpx;
			padding:0 32rpx;
			border-bottom: 1rpx solid #ddd3d7;
			.img{
				width:180rpx;
				height:180rpx;
				border-radius: 16rpx;
			}
			.item-text{
				padding-left:24rpx;
				.text1{
					width: 100%;
					height:100rpx;
					line-height: 50rpx;
					font-size: 30rpx;
					
				}
				.text2{
					width:100%;
					height:80rpx;
					.item-text1{
						text-align: center;
						line-height: 80rpx;
					}
					.item-text2{
						text-align: center;
						line-height: 80rpx;
						font-size: 36rpx;
						color:#d4237a;
					}
					.item-text3{
						// display: inline-block;
						// width:160rpx;
						// height:60rpx;
						// line-height: 60rpx;
						// text-align: center;
						// background: #d4237a;
						// color:white;
					}
				}
			}
			
			
			.getdraw{
				width:120rpx;
				height:120rpx;
				border-radius: 50%;
				background: #d4237a;
				text-align: center;
				line-height: 120rpx;
				position: absolute;
				right:32rpx;
				top:16rpx;
				color:white;
				font-size: 30rpx;
				font-weight: bold;
			}
			
		}
		.g-item2{
			width:750rpx;
			height:100rpx;
			padding:0 32rpx;
			.item1{
				height:60rpx;
				padding:12rpx 16rpx;
				background: #d4237a;
				border-radius: 8rpx;
				color:white;
				margin:0 16rpx;
			}
			.item2{
				height:60rpx;
				padding:12rpx 16rpx;
				border-radius: 8rpx;
				background: #d4237a;
				color:white;
				margin:0 16rpx;
			}
		}
		
	}
	
	.class-type{
		width:100%;
		padding-left: 30%;
	}

	.choose-tab {
		width: 750rpx;
		height: 116rpx;
		background-color: white;
		z-index: 9999;
		line-height: 116rpx;
		text-align: center;
		color: #999999;
		position: fixed;
		left: 0;

		.top-img {
			position: absolute;
			top: 0;
			left: 0;
		}

		.tab-item {
			position: relative;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			line-height: 116rpx;
			color: #999999;
		}

		.active {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			line-height: 116rpx;
			color: #DC2D20;
		}
	}
</style>
